<template>
  <div class="footer">
    <div class="footer_service">
        <div class="container service_box">
            <div>
                <div class="img"></div>
                正品保障
            </div>
            <div>
                <div class="img"></div>
                免息分期
            </div>
            <div>
                <div class="img"></div>
                全球联保
            </div>
            <div>
                <div class="img"></div>
                假一赔三
            </div>
            <div>
                <div class="img"></div>
                终身售后
            </div>
        </div>
    </div>
    <div class="footer_info container">
      <div class="phone">
          <p>客服电话</p>
          <p>400-883-2688</p>
          <p>外呼电话 020-83931899</p>
          <button>售后维修</button>
      </div>
      <div class="help">
          <ul>
              <li class="title">新手指南</li>
              <li>注册新会员</li>
              <li>购物流程</li>
              <li>手表小知识</li>
              <li>退换货流程</li>
          </ul>
          <ul>
              <li class="title">支  付</li>
              <li>支付方式</li>
              <li>分期付款</li>
              <li>发票说明</li>
              <li>支付问题</li>
          </ul>
          <ul>
              <li class="title">配  送</li>
              <li>包裹签收</li>
              <li>配送方式</li>
              <li>配送说明</li>
              <li>自提流程</li>
          </ul>
          <ul>
              <li class="title">万表保障</li>
              <li>正品保障</li>
              <li>售后服务</li>
              <li>价格保护</li>
              <li>七天退换说明</li>
          </ul>
          <ul>
              <li class="title">开放合作</li>
              <li>关于万表</li>
              <li>商务合作</li>
              <li>手表小知识</li>
              <li>万表声明</li>
          </ul>
      </div>
      <div class="qrcode">
          <img src="../assets/qrcode.png" alt="">
      </div>
    </div>
    <div class="footer_copyright container">
      <div class="ad">
          <a target="_blank" href="http://www.xbiao.cn/">手表维修</a>
          <a target="_blank" href="http://www.jiameng.com/">加盟网</a>
          <a target="_blank" href="https://www.zhipin.com/">招聘</a>
          <a target="_blank" href="https://www.jia.com/">装修</a>
          <a target="_blank" href="https://china.wbiao.com.cn/">世界名表</a>
          <a target="_blank" href="https://www.66law.cn/">法律咨询</a>
          <a target="_blank" href="https://www.icauto.com.cn/">车主指南</a>
          <a target="_blank" href="https://tianqi.2345.com/">天气预报</a>
          <a target="_blank" href="http://www.grfyw.com/">房产网</a>
          <a target="_blank" href="https://www.kongfz.com/">孔夫子旧书网</a>
      </div>
      <div class="copyright">
        <p>万表网名表商城 版权所有 2009-2021 ICP备案证书号:
            <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index " rel="nofollow">粤ICP备09108738号</a>
        </p>
        <p>
          <a
            target="_blank"
            href="https://static.wbiao.co/p/pc/images/help/business.png"
            rel="nofollow"
            >营业执照</a
          >
          网监备案:<a
            href="http://www.beian.gov.cn/portal/index.do"
            target="_blank"
            >4401060103141</a
          >
          增值电信业务经营许可证：<a
            target="_blank"
            href="https://static.wbiao.co/p/pc/images/help/licence.png"
            rel="nofollow"
            >粤B2-20211447</a
          >
        </p>
        <p>广州市万表科技股份有限公司  地址:广州市番禺区番禺大道北16号</p>
        <p>Copyright 2009-2021 WWW.WBIAO.CN.LTD ALL RIGHT RESERVED.</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped lang="scss">
@mixin background($x:0, $y:0) {
    background-position: $x, $y;
    background-image: url('../assets/spirit.png');
    background-size: 589px;
    width: 38px;
    height: 38px;
    margin-right: 8px;
}
.footer {
    width: 100%;
    height: 540px;
    background-color: #333;
    // 服务
    .footer_service {
        width: 100%;
        height: 70px;
        background-color: #fff;
        .service_box {
            display: flex;
            height: 71px;
            >div {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 240px;
                height: 70px;
                line-height: 70px;
            }
            & :nth-child(1) {
                .img {
                    @include background(-409px -357px)
                }
            }
            & :nth-child(2) {
                .img {
                    @include background(0px -414px)
                }
            }
            & :nth-child(3) {
                .img {
                    @include background(-361px -357px)
                }
            }
            & :nth-child(4) {
                .img {
                    @include background(-313px -357px)
                }
            }
            & :nth-child(5) {
                .img {
                    @include background(-265px -357px)
                }
            }
        }
    }
    // 底部主要内容
    .footer_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 140px;
        padding: 44px 0 80px 0;
        // 客服电话
        .phone {
            width: 150px;
            height: 132px;
            & :nth-child(1) {
                font-size: 14px;
                color: #ccaa7a;
                margin-bottom: 12px;
            }
            & :nth-child(2) {
                font-size: 24px;
                height: 31px;
                line-height: 31px;
                color: #ccaa7a;
            }
            & :nth-child(3) {
                font-size: 12px;
                color: #999;
            }
            button {
                display: inline-block;
                width: 134px;
                height: 38px;
                font-weight: 600;
                color: #999;
                margin-top: 16px;
                border: 1px solid #999;
                border-color: #999;
                border-radius: 38px;
                background-color: #333;
                cursor: pointer;
                &:hover {
                    color: #fff;
                    background-color: #ccaa7a;
                }
            }
        }
        // 帮助指南
        .help {
            display: flex;
            justify-content: space-evenly;
            flex: 1;
            ul {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 139px;
                li {
                    display: inline-block;
                    

                    color: #999;
                    font-size: 14px;
                    
                    &:first-child {
                        font-size: 16px;
                        color: #ccc;
                        font-weight: 700;
                    }
                }
            }
        }
        // 二维码
        .qrcode {
            width: 113px;
            height: 113px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    // 版权信息
    .footer_copyright {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 165px;
        font-size: 12px;
        color: #999;
        text-align: center;
        a {
            text-decoration: none;
        }
        .ad {
            a{
                margin: 0 10px;
                color: #999;
            }
        }
        .copyright {
            p {
                height: 18px;
                margin-bottom: 10px;
                a {
                    color: #666;
                }
            }
        }
    }
}

</style>
